@charset "utf-8";

/*------------------------------------------------------------	書式設定------------------------------------------------------------*/
img {
    -ms-interpolation-mode: bicubic;
    image-rendering: optimizeQuality;
}

/* テキストの位置 */
.taLeft {
    text-align: left !important;
}

.taCenter {
    text-align: center !important;
}

.taRight {
    text-align: right !important;
}

/* フォントの大きさ（プラス） */
.fsP1 {
    font-size: 1.08em !important;
}

.fsP2 {
    font-size: 1.16em !important;
}

.fsP3 {
    font-size: 1.24em !important;
}

.fsP4 {
    font-size: 1.32em !important;
}

.fsP5 {
    font-size: 1.4em !important;
}

/* フォントの大きさ（マイナス） */
.fsM1 {
    font-size: 0.92em !important;
}

.fsM2 {
    font-size: 0.84em !important;
}

.fsM3 {
    font-size: 0.76em !important;
}

.fsM4 {
    font-size: 0.68em !important;
}

.fsM5 {
    font-size: 0.6em !important;
}

/* フォントの太さ */
.fwNormal {
    font-weight: normal !important;
}

.fwBold {
    font-weight: bold !important;
}

/*------------------------------------------------------------	微調整用クラス（※多用しないこと）------------------------------------------------------------*/
.mt0 {
    margin-top: 0 !important;
}

.mb0 {
    margin-bottom: 0 !important;
}

/*------------------------------------------------------------	汎用スタイル------------------------------------------------------------*/
* html .clearfix {
    zoom: 1;
}

*+html .clearfix {
    zoom: 1;
}

.clearfix:after {
    height: 0;
    visibility: hidden;
    content: ".";
    display: block;
    clear: both;
}

/*------------------------------------------------------------	common------------------------------------------------------------*/
#main .mainBox {
    margin: 0 auto;
    width: 1022px;
}

.target {
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0;
}

.target.action {
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 1;
}

.animate {
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0;
}

.object-fit-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    font-family: "object-fit: cover;";
}

.echo-img {
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    transition: all .4s ease-out;
    -o-transition: all .4s ease-out;
    -moz-transition: all .4s ease-out;
    -webkit-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out;
}

.echo-img.loaded {
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}

/*------------------------------------------------------------	comHover01------------------------------------------------------------*/
.pcState #main .comHover01,
.pcState #main .subComHover01 {
    position: relative;
    display: block;
}

.pcState #main .comHover01:after,
.pcState #main .comHover01:before,
.pcState #main .subComHover01:after,
.pcState #main .subComHover01:before {
    background-color: #000;
    content: "";
    display: block;
    position: absolute;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    z-index: 10;
}

.pcState #main .comHover01:after {
    height: 1px;
    left: 0;
    top: 0;
    width: 0;
}

.pcState #main .comHover01:before {
    bottom: 0;
    height: 1px;
    right: 0;
    width: 0;
}

.pcState #main .subComHover01:after {
    bottom: 0;
    height: 0;
    left: 0;
    width: 1px;
}

.pcState #main .subComHover01:before {
    height: 0;
    right: 0;
    top: 0;
    width: 1px;
}

.pcState #main .comHover01:hover:after,
.pcState #main .comHover01:hover:before {
    width: 100%;
}

.pcState #main .comHover01:hover .subComHover01:after,
.pcState #main .comHover01:hover .subComHover01:before {
    height: 100%;
}

/*------------------------------------------------------------	comNews------------------------------------------------------------*/
#main .comNews {
    margin: 0 auto 60px;
    position: relative;
    width: 1200px;
}

#main .comNews .foo {
    margin: 0 auto;
    width: 1022px;
}

#main .comNews .arrow {
    margin-left: -600px;
    width: 1200px;
    position: absolute;
    left: 50%;
    top: 97px;
}

#main .comNews .arrow .prev {
    position: absolute;
    top: 0;
    left: 17px;
}

#main .comNews .arrow .next {
    position: absolute;
    top: 0;
    right: 11px;
}

#main .comNews .arrow .prev img,
#main .comNews .arrow .next img {
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
}

.pcState #main .comNews .arrow .prev:hover img {
    -webkit-transform: translateX(-16px);
    -ms-transform: translateX(-16px);
    transform: translateX(-16px);
}

.pcState #main .comNews .arrow .next:hover img {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
}

#main .comNewsUl {
    margin-left: 14px;
}

#main .comNewsUl li {
    padding: 0 18px;
    position: relative;
    float: left;
    width: 214px;
}

#main .comNewsUl li a {
    display: block;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
}

#main .comNewsUl li .photo {
    margin-bottom: 10px;
    position: relative;
    width: 214px;
    height: 214px;
    border-radius: 100%;
    overflow: hidden;
}

#main .comNewsUl li .photo .img {
    display: none;
}

#main .comNewsUl li .photo .bd {
    height: 100%;
    width: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    border: 3px solid #D8D8D8;
    box-sizing: border-box;
    border-radius: 100%;
}

.pcState #main .comNewsUl li a:hover .photo .bd {
    opacity: 1;
}

#main .comNewsUl li .tag {
    padding: 5px 17px 4px;
    color: #fff;
    font-size: 12px;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: #000;
    z-index: 10;
    text-align: left;
    font-weight: 600;
}

#main .comNewsUl li .data {
    margin-bottom: 2px;
    color: #999;
    font-size: 12px;
}

#main .comNewsUl li p {
    color: #333;
    font-size: 13px;
    line-height: 1.54;
}

.pcState #main .comNewsUl li .txt>span {
    background: #fff url(../images/line02.gif) repeat-x left top;
    background-size: auto 0.6em;
    position: relative;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
}

@media not all {
    .pcState #main .comNewsUl li .txt>span {
        background-size: auto 0.9em;
    }
}

.pcState #main .comNewsUl li a:hover .txt>span {
    background-color: #D9D9D9;
}

@media all and (min-width: 768px) and (max-width: 1200px) {
    #main .comNews {
        margin: 0 auto 60px;
        width: auto;
    }

    #main .comNewsUl {
        margin-left: 0;
    }

    #main .comNews .arrow {
        margin: 0;
        left: 0;
        width: 100%;
    }

    #main .comNews .arrow .prev {
        left: 40px;
    }

    #main .comNews .arrow .next {
        right: 40px;
    }
}

/*------------------------------------------------------------	comExhibition------------------------------------------------------------*/
#main .comExhibition {
    padding-bottom: 53px;
    position: relative;
}

#main .comExhibition ul li {
    margin: 0 23px;
    float: left;
    width: 158px;
}

#main .comExhibition ul li a {
    display: block;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
}

#main .comExhibition ul li .photo {
    margin-bottom: 15px;
    display: table;
    position: relative;
    width: 100%;
    /*height: 223px;*/
}

#main .comExhibition ul li .photo>span {
    display: table-cell;
    vertical-align: bottom;
    position: relative;
}

#main .comExhibition ul li .photo>span .sub {
    position: relative;
    display: block;
}

#main .comExhibition ul li .photo>span .sub>img {
    width: 100%;
}

#main .comExhibition ul li .photo>span .bd {
    height: 100%;
    width: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    border: 3px solid #fff;
    box-sizing: border-box;
}

.pcState #main .comExhibition ul li a:hover .photo>span .bd {
    opacity: 1;
}

#main .comExhibition ul li p {
    color: #333;
    font-size: 11px;
    line-height: 1.8;
}

#main .comExhibition ul li p span span {
    margin-top: 5px;
    color: #878787;
    font-size: 10px;
    display: inline-block;
}

.pcState #main .comExhibition ul li p>span {
    background: #eee url(../images/line03.gif) repeat-x left top;
    background-size: auto 0.6em;
    position: relative;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
}

@media not all {
    .pcState #main .comExhibition ul li p>span {
        background-size: auto 0.9em;
    }
}

.pcState #main .comExhibition ul li a:hover p>span {
    background-color: #fff;
}

#main .comExhibition .arrow li {
    position: absolute;
    bottom: -17px;
    width: auto;
    cursor: pointer;
}

#main .comExhibition .arrow li img {
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
}

#main .comExhibition .arrow .prev {
    left: 35px;
}

#main .comExhibition .arrow .next {
    right: 35px;
}

#main .comExhibition .arrow .prev:hover img {
    -webkit-transform: translateX(-16px);
    -ms-transform: translateX(-16px);
    transform: translateX(-16px);
}

#main .comExhibition .arrow .next:hover img {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
}

#main .comExhibitionLink {
    text-align: center;
    margin-bottom: 80px;
}

#main .comExhibitionLink a {
    padding-left: 25px;
    position: relative;
    display: inline-block;
    color: #333;
    font-size: 13px;
    background: url(../images/icon07.png) no-repeat left 2px;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
}

.pcState #main .comExhibitionLink a:hover {
    color: #bbb;
    background: url(../images/icon08.png) no-repeat left 2px;
}

/*------------------------------------------------------------	comTopUl------------------------------------------------------------*/
#main .comTopUl {
    margin-bottom: 92px;
    font-size: 0;
    text-align: center;
}

#main .comTopUl li {
    font-size: 13px;
    display: inline-block;
    letter-spacing: 0.1px;
}

#main .comTopUl li a {
    margin: 0 10px;
    position: relative;
    display: inline-block;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
}

#main .comTopUl .on a {
    opacity: 0.5;
}

.pcState #main .comTopUl li a:after {
    background-color: #8f4646;
    bottom: -2px;
    content: "";
    height: 1px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    width: 0;
}

.pcState #main .comTopUl li a:hover {
    text-decoration: none;
}

.pcState #main .comTopUl li a:hover:after {
    width: 100%;
}

.pcState #main .comTopUl .on a:hover:after {
    width: 0;
}

/*------------------------------------------------------------	topMenu------------------------------------------------------------*/
#main .topMenu {
    margin-bottom: 70px;
    text-align: center;
}

#main .btmMenu {
    margin-bottom: 0 !important;
}

#main .topMenu li {
    display: inline-block;
}

#main .topMenu li a {
    margin: 0 25px 0 25px;
    position: relative;
    display: inline-block;
}

#main .topMenu li a:before {
    margin-top: -11px;
    width: 1px;
    height: 21px;
    background: #ce7373;
    position: absolute;
    top: 50%;
    right: -26px;
    content: "";
}

#main .topMenu li:last-child a:before {
    display: none;
}

.pcState #main .topMenu li a:after {
    background-color: #b76464;
    bottom: -2px;
    content: "";
    height: 1px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    width: 0;
}

.pcState #main .topMenu li a:hover {
    text-decoration: none;
}

.pcState #main .topMenu li a:hover:after {
    width: 100%;
}

.pcState #main .topMenu .on a:hover:after {
    width: 0;
}

#main .topMenu li img {
    height: 19px;
}

#main .topMenu li.current {
    opacity: 0.5;
}

